<template>
<my-wrapper fit title="项目模板首页示例">
  <my-list split border stripe :page-size="5" :loader="load" ref="list">
    <template v-slot="{item}">
      <div class="item">{{item.name}} / {{item.userName}} / {{item.password}} / {{item.age}}
        <el-button type="text" @click="deleteClick(item)">delete</el-button>
        <el-button type="text" @click="editClick(item)">edit</el-button>
      </div>
    </template>
  </my-list>
  <el-button @click="$refs.list.refresh()">load</el-button>
  <el-button @click="insertMany">insertMany</el-button> 
  <el-button @click="deleteMany">deleteMany</el-button> 

  <el-button @click="loginTest">login</el-button> 
  <el-button @click="getOne">getOne</el-button> 
  
  <div style="border-top: 1px solid">
    <el-button @click="addRoleClick">addRole</el-button>
    <el-button @click="findRoleClick">findRole</el-button>  
  </div> 

  <div style="height: 400px; border: 1px solid">
    
  </div>

  <my-dialog :visible.sync="visible" target="body" title="标题文字" width="400px" :footer="false">
    <my-form :model="model" @submit="handleSubmit">
      <my-input name="userName" label="用户名" :disabled="true"></my-input>
      <my-input name="name" label="姓名"></my-input>
      <my-input name="password" label="姓名"></my-input>
    </my-form>
  </my-dialog>
</my-wrapper>
</template>

<script>
  import user from '$my/code/mixin/user'
  import role from '$my/code/mixin/role'
  import {encryptByDES} from '$ui/utils/crypto'
 
  export default {
  mixins: [user, role],
  components: {},
  props: {
  },
  data() {  
      return { 
        list: [],
        model: {
          id: '',
          userName: '',
          name: '',
          password: ''
        },
        visible: false,
        crypTest: '123456'

        
      }
  },
  computed: {
  },
  methods: {
    insertMany() {
      this.userInsertMany().then(() => {
        console.log('添加成功')
        this.$refs.list.refresh()
      })
    },
    deleteMany() {
      this.userDeleteMany().then(() => {
        console.log('删除成功')
        this.$refs.list.refresh()
      })
    },
    getOne() {
      this.getUser({
        id: '5f6587d26cc11c33a408e1a4'
      }).then((res) => {
        console.log(res)
      })
    },
    load(page, size) {
      return this.fetchUser({
        data: {
          // name: 'joseph',
          // page: page, 
          // pageSize: size
        }
      }).then((res) => { 
        // this.list = res.list,
        return Promise.resolve({
          list: res.list,
          total: res.total
        })
      })
    },
    deleteClick(item) {
      console.log(item.id)
      this.removeUser({id: item.id}).then((res) => {
        this.$refs.list.refresh()
      })
    },
    editClick(item) {
      this.model.userName = item.userName
      this.model.password = item.password
      this.model.name = item.name
      this.model.id = item.id

      this.visible = true
    },
    handleSubmit(res) {
      console.log(res)
      this.updateUser({data: res}).then((res) => {
        console.log(res)
        this.visible = false
        this.$refs.list.refresh()
      })
    },

    loginTest() {
      this.login({
        data: {
          userName: encryptByDES('user_15', 'JOSEPH_CENTER'),
          password: encryptByDES('123456&', 'JOSEPH_CENTER')
        }
      })
    },

    addRoleClick() {
      this.addRole({
        data: {
          roleName: '普通用户',
          roleId: '1'
        }
      }).then((res) => {
        console.log(res)
      })
    },
    findRoleClick() {
      this.fetchRole({}).then((res) => {
        console.log(res)
      }) 
    }
  },
  created() {
    // this.load()
  },
  mounted() {
      
  }
}
</script>
